<template>
  <div class="ConvenientService">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">便民服务</div>
    </div> -->

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <div class="carousel">
        <img :src="imgs[4]" />
      </div>
      <div class="entranceList">
        <van-list class="entranceBox" :finished="true">
          <div class="entranceRow" @click="$router.push('/lattice')">
            <div class="lpIcon">
              <img src="@/assets/gg/1.png" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">网格风采</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="skip('就近入格')">
            <div class="lpIcon">
              <img src="@/assets/gg/2.png" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">就近入格</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="skip('格格帮办')">
            <div class="lpIcon">
              <img src="@/assets/gg/3.png" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">格格帮办</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="skip('网格帮帮团')">
            <div class="lpIcon">
              <img src="@/assets/gg/4.png" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">网格帮帮团</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
          <div class="entranceRow" @click="skip('我也要出力')">
            <div class="lpIcon">
              <img src="@/assets/gg/5.png" />
            </div>
            <div class="rpIcon">
              <div class="rpBox">
                <div class="title">我也要出力</div>
                <div class="iconPt">
                  <img :src="imgs[5]" />
                </div>
              </div>
              <van-divider class="reDivider" />
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- 底部页面操作栏 -->
    <!-- <div class="actionBar">
      <div class="describe">有矛盾就预约~</div>
      <van-button type="info" to="/AppMediation" class="but">我要预约</van-button>
    </div>-->
  </div>
</template>
<script>
export default {
  name: "ConMediation",
  data() {
    return {
      imgs: [
        require("../../assets/BMFW/icon4.png"),
        require("../../assets/BMFW/icon1.png"),
        require("../../assets/BMFW/icon2.png"),
        require("../../assets/BMFW/icon3.png"),

        require("../../assets/BMFW/bigPic.png"),
        require("../../assets/transfer/backIcon.png")
      ]
    };
  },
  methods: {
    back() {
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },
    skip(title){
      this.$router.push({
        path: '/QRCodes',
        query: {
          title: title
        }
      })
    },
    convenientServiceTo(w) {
      switch (w) {
        case 0:
          this.$router.push("/propertySer");
          break;
        case 1:
          this.$router.push("/legalService");
          break;
        case 2:
          this.$router.push("/volunteerSer");
          break;
        case 3:
          this.$router.push("/stylisticSer");
          break;
        default:
          this.$router.push("/home");
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.ConvenientService {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    // height: calc(100vh - 41px);
    // margin: 41px 0 0 0;

    .carousel {
      background-color: $sm-bg-color;
      margin: 0;
      padding: 0;
      height: $sm-img-per-mini;
      width: $sm-img-per-max;

      img {
        // height: $sm-img-per-max;
        width: $sm-img-per-max;
      }
    }

    .entranceList {
      padding: $sm-spacing-col-xl $sm-spaceing-block-base $sm-spacing-col-xl
        $sm-spaceing-block-base;
      height: calc(100vh - 30% - 78px);

      background: $sm-bg-color;

      .entranceBox {
        display: flex;
        flex-direction: column;

        .entranceRow {
          padding: $sm-spacing-col-xl 0 0 0;
          display: flex;
          flex-direction: row nowrap;
          justify-content: space-between;
          align-items: center;

          .lpIcon {
            margin: 0 $sm-spacing-col-lg 0 0;
            padding: 0 0 $sm-spacing-col-lg 0;

            img {
              height: $sm-icon-px-xl;
            }
          }

          .rpIcon {
            flex: 1 1 auto;

            .rpBox {
              display: flex;
              flex-direction: row nowrap;
              justify-content: space-between;
              align-items: center;

              .title {
                font-weight: bold;
              }
              .iconPt {
                img {
                  height: $sm-icon-px-bp;
                }
              }
            }
            .reDivider {
              margin: $sm-spacing-col-xl 0 0 0;
            }
          }
        }
      }
    }
  }

  .actionBar {
    margin: 0;
    padding: 0;
    height: 50px;

    display: flex;
    flex-direction: row nowrap;
    justify-content: center;
    align-items: center;

    .describe {
      text-align: center;
      flex: 1 1 auto;
      color: $sm-text-color-grey;
    }

    .but {
      height: $sm-img-per-max;
      flex: 1 1 auto;
    }
  }
}
</style>